<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch">
      <el-form-item label="河流" prop="status">
        <el-input v-model="queryParams.riverName" placeholder="请输入河流" />
      </el-form-item>
      <el-form-item label="所属流域">
        <el-select v-model="queryParams.basinId" placeholder="请选择流域">
            <el-option v-for="item in riverBasinList" :key="item.id" :label="item.basinname" :value="item.id">
            </el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">查询</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain 
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:menu:add']"
        >新增</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="success"
          plain
          icon="el-icon-edit"
          size="mini"
          @click="handleUpdate"
        >修改</el-button>
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          @click="handleDelete()"
        >删除</el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
        >导出</el-button>
      </el-col> -->
      <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
    </el-row>
    <el-table  :data="riverList" style="width: 100%"  v-if="refreshTable" v-loading="loading" @selection-change="handleSelectionChange">
        <el-table-column  type="selection" width="55" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="rivername" label="河流名称" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="firstriversystem" label="所属流域" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="riverlength" label="河流长度（km）" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="basinarea" label="流域面积（km²）" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column  prop="regionrelation" label="行政区划" :show-overflow-tooltip="true"></el-table-column>
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
    </el-table>
    <el-pagination layout="total,sizes,prev, pager, next" :total="this.total" background :page-size="10"  :page-sizes="[10, 20, 50]"  @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination>
    <el-dialog :title="title" :visible.sync="open" width="1000px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules"label-width="160px">
        <el-row>
          <el-col :span="24">
            <div>基本信息</div>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="河流名称" prop="rivername">
              <el-input v-model="form.rivername" placeholder="请输入河流名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="河流代码" prop="rivercode">
              <el-input v-model="form.rivercode" placeholder="请输入河流代码"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="河流别名" prop="riveralias">
              <el-input v-model="form.riveralias" placeholder="请输入河流名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属流域" prop="firstriversystemcode">
              <el-select v-model="form.firstriversystemcode" placeholder="请选择流域" style="width:100%" @change="formChange($event,'id',{'firstriversystem':'basinname','basinid':'id'},riverBasinList)">
                <el-option v-for="item in riverBasinList" :key="item.id" :label="item.basinname" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="河流级别" prop="riverlevelcode">
              <el-select v-model="form.riverlevelcode" placeholder="请选择河流级别" style="width:100%" @change="formChange($event,'dictCode',{'riverlevel':'dictLabel'},riverLeveList)">
                <el-option v-for="item in riverLeveList" :key="item.dictCode" :label="item.dictLabel" :value="item.dictCode"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="父级河流" prop="parentriverid" >
              <el-select v-model="form.parentriverid" placeholder="请选择父级河流" style="width:100%" @change="formChange($event,'id',{'parentrivercode':'rivercode','parentrivername':'rivername'},riverList)">
                <el-option v-for="item in riverList" :key="item.id" :label="item.rivername" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="汇入河流" prop="inriver" >
              <el-input v-model="form.inriver" placeholder="请输入汇入河流"></el-input>
              <!-- <el-select v-model="form.inriver" placeholder="请选择汇入河流" style="width:100%" >
                <el-option v-for="item in riverList" :key="item.id" :label="item.rivername" :value="item.rivername"></el-option>
              </el-select> -->
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="行政划区" prop="region">
              <el-select v-model="form.region" placeholder="请选择行政划区" style="width:100%" @change="formChange($event,'code',{'regionrelation':'name'},regionList)">
                <el-option v-for="item in regionList" :key="item.code" :label="item.name" :value="item.code"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="区划与河流位置关系" prop="riverBasinRelation">
              <el-input v-model="form.riverBasinRelation" placeholder="区划与河流位置关系"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="干流/支流" prop="streamtype">
              <el-select v-model="form.streamtype" placeholder="干流/支流" style="width:100%">
                <el-option v-for="item in [{label:'支流',value:'1'}, {label:'干流',value:'0'},]" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="状态" prop="lifecycle">
              <el-select v-model="form.lifecycle" placeholder="请选择状态" style="width:100%">
                <el-option v-for="item in [{id:'1',name:'启用'},{id:'0',name:'禁用'}]" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="24">
            <el-form-item label="河流简介">
              <el-input type="textarea" v-model="form.introduction" placeholder="" maxlength="200"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div>基本信息</div>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="河流长度" prop="riverlength">
                <el-input type="number" v-model="form.riverlength">
                    <template slot="append">(Km)</template>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流域面积" prop="basinarea">
                <el-input type="number" v-model="form.basinarea">
                  <template slot="append">(Km²)</template>
                </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="覆盖人口" prop="populationcovered">
                <el-input type="number" v-model="form.populationcovered">
                   <template slot="append">(万人)</template>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="平均径流量" prop="runoffcapacity">
                <el-input type="number" v-model="form.runoffcapacity">
                   <template slot="append">(m³)</template>
                </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="平均枯水期流量" prop="flowcapacity">
                <el-input type="number" v-model="form.flowcapacity">
                  <template slot="append">(m³/s)</template>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="左岸支流数量" prop="lefttributarynum">
                <el-input type="number" v-model="form.lefttributarynum">
                  <template slot="append">(条)</template>
                </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="右岸支流数量" prop="righttributarynum">
                <el-input type="number" v-model="form.righttributarynum">
                   <template slot="append">(条)</template>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="岸线长度" prop="lakelength">
                <el-input type="number" v-model="form.lakelength">
                  <template slot="append">(Km)</template>
                </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="岸线开发利用长度" prop="uselength">
                <el-input type="number" v-model="form.uselength">
                  <template slot="append">(Km)</template>
                </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="平均水深" prop="waterdepth">
                <el-input type="number" v-model="form.waterdepth">
                  <template slot="append">(m)</template>
                </el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="是否地图显示">
              <el-select v-model="form.isgisshow" prop="isgisshow" style="width:100%">
                <el-option v-for="item in [{id:'1',name:'展示'},{id:'0',name:'不展示'}]" :key="item.value" :label="item.name" :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="同河支流排序" prop="sort">
                <el-input type="number" v-model="form.sort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row >
          <el-col :span="12">
            <el-form-item label="河流排序" prop="rivertsort" >
                <el-input type="number" v-model="form.rivertsort"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <!-- <el-row >
          <el-col :span="12">
            <el-form-item label="上传图片">
              <el-upload
                class="avatar-uploader"
                :show-file-list="false"
                :on-success="handleAvatarSuccess"
                :before-upload="beforeAvatarUpload">
                <img v-if="imageUrl" :src="imageUrl" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>
            </el-form-item>
          </el-col>
        </el-row> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {basinList} from '@/api/dataResources/monitorData/riverbasin.js';
import {getRegionList} from '@/api/dataResources/monitorData/region.js'
import {getDicts} from '@/api/system/dict/data.js';
import {getRiverList,riverEdit,riverAdd,riverRemove} from '@/api/dataResources/monitorData/river.js';
export default {
  data(){
    return {
      showSearch: true,
      queryParams:{
        riverName:'',
        basinId:'',
        pageNum: 1, 
        pageSize: 10,
      },
      riverBasinList:[],
      riverLeveList:[],
      riverList:[],
      regionList:[],
      tableSelect:[],
      refreshTable:true,
      loading: false,
      title:'',
      total:0,
      open:false,
      form: {},
      rules:{
        rivername:[
          { required: true, message: "河流名称不能为空", trigger: "blur" }
        ],
        rivercode:[
          { required: true, message: "河流代码不能为空", trigger: "blur" }
        ],
        firstriversystemcode:[
          { required: true, message: "所属流域不能为空", trigger: "blur" }
        ],
        riverlevelcode:[
          { required: true, message: "河流级别不能为空", trigger: "blur" }
        ],
        // region:[
        //   { required: true, message: "所属区域不能为空", trigger: "blur" }
        // ],
        inriver:[
          { required: true, message: "所属区域不能为空", trigger: "blur" }
        ],
        lifecycle:[
          { required: true, message: "河流状态不能为空", trigger: "blur" }
        ],
        rivertsort:[
          { required: true, message: "河流排序不能为空", trigger: "blur" }
        ],

      },
    }
  },
  created() {
    this.getRiverBasinList();
    this.getRiverLevelList();
    this.getRegionList();
    this.getList();
  },
  methods: {
    handleQuery() {
      this.getList();
    },
    handleAdd() {
      this.open = true;
      this.title = "添加河流信息";
      this.form = {
        "rivername": "",
        "rivercode": "",
        "riveralias": "",
        "basinid": null,
        "riverlevelcode": null,
        "firstriversystem": "",
        "firstriversystemcode": "",
        "secondriversystem": "",
        "secondriversystemcode": "",
        "thirdriversystem": "",
        "thirdriversystemcode": "",
        "riverlevel": "",
        "topriverid": "",
        "toprivercode": null,
        "toprivername": "",
        "parentrivercode": null,
        "parentrivername": null,
        "parentriverid": "",
        "inriver": null,
        "region": null,
        "regionrelation": null,
        "riverlength": "",
        "basinarea": "",
        "populationcovered": null,
        "runoffcapacity": null,
        "flowcapacity": "",
        "lefttributarynum": "",
        "righttributarynum": "",
        "lakelength": "",
        "uselength": null,
        "waterdepth": null,
        "sort": "",
        "isgisshow": "",
        "introduction": "",
        "streamtype": "",
        "rivertsort": "",
        "lifecycle": "1",
        "parentallid": null
      }
      
    },
    handleUpdate(row) {
      this.open = true;
      this.title = "编辑河流信息";
      this.form = {...row};
    },
    formChange(value,key,map,list){
      let item = list.find(it => it[key]==value);
      if(item) {
        for(let fkey in map){
          this.form[fkey] = item[map[fkey]]
          console.log('fkey',fkey,this.form[fkey])
        }
      }
    },
    handleSelectionChange(val){
      this.tableSelect = val;
    },
    async handleDelete(row) {
      // 删除弹窗确认
      let res = await this.$confirm('是否确认删除?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        return true
      }).catch(() => {
        return false
      });
      if(!res) return;
      let id;
      if(row){
        id = row.id;
      } else if(this.tableSelect.length > 0){
        id = this.tableSelect.map(item => item.id).join(',');
      };
      await riverRemove(id);
      this.getList();
    },
    handleExport() {

    },
    handleSizeChange(val){
      this.queryParams.pageNum = 1;
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) { 
      this.queryParams.pageNum = val;
      this.getList();
    },
    resetQuery() {
      this.queryParams = {
        riverName:'',
        basinId:'',
        pageNum: 1, 
        pageSize: 10,
      };
      this.getList();
    },
    submitForm(){
      this.$refs["form"].validate((valid) =>{
        if(valid){
          this.saveByApi();
        }
      })
    },    
    async saveByApi(){
      this.open = false;
      if(this.title == "添加河流信息"){ 
        await riverAdd(this.form);
      } else {
        await riverEdit(this.form);
      }
      await this.getList();
    },
    cancel() {
      this.open = false;
    },
    handleAvatarSuccess(){},
    beforeAvatarUpload(){},
    async getList() {
      this.loading = true;
      this.tableSelect = [];
      let res = await getRiverList(this.queryParams);
      if(res.code == 200){
        this.riverList = res.rows;
        this.total = res.total;
      }
      this.loading = false
    },
    async getRiverBasinList() {
      let res = await basinList();
      if(res.code == 200){
        this.riverBasinList = res.rows;
      }
    },
    async getRiverLevelList() {
      let res = await getDicts('sys_riverlevel');
      if(res.code == 200){
        this.riverLeveList = res.data;
      }
    },
    async getRegionList() {
      let res = await getRegionList();
      if(res.code == 200){
        this.regionList = res.rows;
      }
    },
  },
};
</script>

<style></style>
